<template>
  <div class="message">
    <ElPopover placement="bottom" :width="310" trigger="click">
      <template #reference>
        <ElBadge :value="0" class="item">
          <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
        </ElBadge>
      </template>
      <ElTabs v-model="activeName">
        <ElTabPane label="通知(0)" name="first">
          <div class="message-empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>暂无消息</div>
          </div>
        </ElTabPane>
        <ElTabPane label="消息(0)" name="second">
          <div class="message-empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>暂无消息</div>
          </div>
        </ElTabPane>
        <ElTabPane label="待办(0)" name="third">
          <div class="message-empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>暂无代办</div>
          </div>
        </ElTabPane>
      </ElTabs>
    </ElPopover>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElPopover, ElBadge, ElTabs, ElTabPane } from "element-plus";
const activeName = ref("first");
</script>

<style scoped lang="scss">
.message-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 260px;
  line-height: 45px;
}
</style>
